<template>

  <div class="container">
    <div class="panel-bg">
      <img :src="url" alt="" class="panel-bg-img">
    </div>
    <div class="panel-container">

      <van-nav-bar title="欢迎使用酒店预约系统" :left-arrow="false" @click-left="$router.back()" style="margin-bottom: 20px" />
      <div class="swiper">
        <van-swipe :autoplay="3000" height="350" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" class="small-image" alt="center" />
          </van-swipe-item>
        </van-swipe>
      </div>


      <van-grid clickable :column-num="2" gutter="10px" style="margin-bottom: 20px">
        <van-grid-item icon="hotel-o" text="酒店预订" to="/roomList" @click="getRoomRate()" icon-color="#FF7F50" />
        <van-grid-item icon="fire-o" text="餐饮服务" to="/FoodAndBeverages" icon-color="#000080" />
      </van-grid>

      <van-grid clickable :column-num="4" gutter="10px">
        <van-grid-item icon="star-o" text="我的房间" to="/myRoom" icon-color="#D98719" />
        <van-grid-item icon="gift-card-o" text="行李寄存" to="/Luggage" icon-color="#C0C0C0" />
        <van-grid-item icon="shopping-cart-o" text="积分商城" to="/PointsMall" icon-color="#70DB93" />
        <van-grid-item icon="user-circle-o" text="个人中心" to="/my" icon-color="#87CEEB" />
      </van-grid>
    </div>

  </div>

</template>

<script setup>
import { useRouter } from 'vue-router';
import bg from "../image/home-bg"
import {get} from "../util/request.js";
import {showToast} from "vant";
const url = bg.url

const router = useRouter();
const images = [
  'https://tse1-mm.cn.bing.net/th/id/OIP-C.ZCbbPxKSAxblIeXBBhcV-QHaG2?rs=1&pid=ImgDetMain',
  'https://tse3-mm.cn.bing.net/th/id/OIP-C.xWl07eVvI6IZh90zKhlinAHaHb?rs=1&pid=ImgDetMain',
];

const getRoomRate = () => {
  get("hotel/room/rate").then(r=>{
    if (r.code !== 0) {
      showToast("评分获取失败")
    }
  }).catch(function () {
    showToast("评分获取失败")
  })
}

</script>

<style scoped>
.small-image {
  /* width: 400px; */
  /* 你可以根据需要调整宽度 */
  height: 350px;
  /* 保持图片的宽高比 */
  display: block;
  margin: 0 auto; /* 让图片在容器中水平居中 */
  max-width: 100%; /* 可选：确保图片不超过容器宽度 */
}

:deep(.van-grid-item__content) {
  border-radius: 20px;
  background: linear-gradient(225deg, #ffffff, #e6e6e6);
  box-shadow: -11px 11px 22px #f7f7f7,
    11px -11px 22px #ffffff;
}

.container,
.panel-container {
  position: relative;
  --van-nav-bar-background: transparent;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-title-font-size: 24px;
  --van-nav-bar-icon-color: #fff;
}

:deep(.van-hairline--bottom::after) {
  border-bottom-width: 0;
}

.panel-container {
  z-index: 5;
}

.panel-bg-img {
  width: 100%;
}

.panel-bg {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;

}

.swiper {
  text-align: center;
  overflow: hidden;
  border-radius: 8px;
  /* border-radius: 50px; */
  background: #fff;
  margin: 0 24px 16px;
  /* box-shadow: 0px 0px 24px #bebebe; */
  /* -20px -20px 60px #ffffff; */
}
</style>
